<template>
  <div :id="'sevenSaleEcharts' + id" style="height:290px;width:100%;"></div>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        props: {
            data: {
                type: Array,
                default: []
            },
            id: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                sevenSaleEcharts: null
            }
        },
        created() {
            if (this.data.length > 0) {
                let date, num;
                date = this.data.map(i => i.singDate);
                num = this.data.map(i => i.bigDecimal);

                this.$nextTick(() => {
                    this.sevenSaleEcharts = echarts.init(document.getElementById('sevenSaleEcharts' + this.id), "macarons");
                    this.sevenSaleEcharts.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '2%',
                            right: '4%',
                            bottom: '3%',
                            top: '1%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: date
                        },
                        series: [{
                            name: this.id == 1 ? '近7日销售看板' : this.id == 2 ? '近7日销售利润看板' : '近7日回收看板',
                            type: 'bar',
                            barWidth: 30,
                            barRadius: 10,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#99A7FE'}, // 深蓝色
                                            {offset: 1, color: '#5870FE'}  // 绿色
                                        ]
                                    )
                                }
                            },
                            data: num
                        }]
                    });

                    let that = this;
                    window.addEventListener('resize', () => {
                        that.sevenSaleEcharts.resize()
                    });
                })
            }
        }
    }
</script>
